<template>
  <div>
    <van-nav-bar left-arrow
                 title="搜索中心"
                 @click-left="$router.back()">
    </van-nav-bar>
    <van-search show-action
                placeholder="请输入搜索关键词"
                shape="round"
                v-model.trim="keyword"
                @input="hgetSuggestion">
      <template #action>
        <div @click="doSearch">搜索</div>
      </template>
    </van-search>

    <!-- 联想建议区域 -->
    <!-- 如果keyword有值，联想建议区域就不为空 -->
    <van-cell-group v-if="keyword !==''">
      <van-cell v-for="(item,index) in SearchChange"
                :key="index"
                icon="search"
                @click="suggestHandler(index)">
        <div v-html="item"></div>
      </van-cell>
    </van-cell-group>

    <!-- 搜索历史记录 -->
    <!-- 如果keyword没有值，联想建议区域就为空 ，历史记录显示-->
    <van-cell-group v-else>
      <van-cell title="历史记录"> </van-cell>
      <van-cell v-for="(list,index) in historyList"
                :key="index"
                :title="list"
                @click="historySearch(list)">
        <van-icon name="close"
                  @click="close(index)" />
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { getSuggestion } from '@/api/search.js'
import { getItem, setItem } from '@/utils/ls.js'
import _ from 'lodash'
export default {
  name: 'SearchIndex',
  data () {
    return {
      keyword: '', // 搜索关键字
      searchList: [], // 用于存储用户搜索出来的信息
      historyList: getItem('historyList') || [] // 历史记录
    }
  },
  // 搜索关键字高亮显示
  computed: {
    SearchChange () {
      const newArr2 = this.searchList.map((item) => {
        const res = new RegExp(this.keyword, 'g')
        const newArr = item.replace(res, (target) => {
          return `<span style="color:red;">${target}</span>`
        })
        return newArr
      })
      return newArr2
    }
  },
  methods: {
    // _.debounce里的函数一定是用es5的函数书写方式，不可以使用es6的，
    // 原因：因为debounce函数在内部封装功能的时候需要动态修改参数（func) 的this指向，如果传入的是箭头函数  是没有this的
    hgetSuggestion: _.debounce(function () {
      // 搜索关键字不能为空
      if (this.keyword !== '') {
        getSuggestion(this.keyword).then(res => {
          this.searchList = res.data.data.options
        })
      } else {
        this.searchList = []
        return false
      }
    }, 700),
    // 点击搜索按钮，将当前输入框的关键字存入历史记录
    doSearch () {
      if (this.keyword !== '') {
        this.historyList.push(this.keyword)
        // 本地化持久化缓存
        setItem('historyList', this.historyList)
        // 跳转详情页
        this.$router.push({
          path: '/searchRosult',
          query: {
            q: this.keyword
          }
        })
      } else {
        this.$toast('关键词不能为空')
        return false
      }
    },
    suggestHandler (index) {
      this.historyList.push(this.searchList[index])
      // 本地化持久化缓存
      setItem('historyList', this.historyList)
      // 跳转详情页
      this.$router.push({
        path: '/searchRosult',
        query: {
          q: this.searchList[index]
        }
      })
    },
    // 点击历史里的记录，进行跳转
    historySearch (keyword) {
      // 跳转详情页
      this.$router.push({
        path: '/searchRosult',
        query: {
          q: keyword
        }
      })
    },
    // 点击叉号，删除选中的那条历史记录
    close (index) {
      this.historyList.splice(index, 1)
      // ls里也要删除，重新渲染一下ls就可以了
      setItem('historyList', this.historyList)
    }
  }

}
</script>
